<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片管理器</title>
    <script src="http://palpitation.shop/js/jquery-3.2.1.min.js"></script>
    <style>
        *{
            box-sizing: border-box;margin: 0;padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .up_warp{
            width: 800px;height: 416px;box-shadow: 0 0 0 2px #0099CB;border-radius: 5px;
            position: fixed;top: 10%;left: 0;right: 0;margin: auto;z-index: 99;overflow: hidden;
        }
        .up_title{
            width: 100%;height: 45px;background-color: #f1f2f4;position: relative;
        }
        .up_title:after{
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .up_title_l{
            width: 140px;height: 100%;
            text-align: center;line-height: 45px;font-size: 20px;color: #333;
            float: left;
        }
        .up_title_r{
            width: 17px;height: 17px;font-size: 12px;text-align: center;line-height: 15px;
            background-color: #0099cb;color: #fff;
            float: right;margin: 14px 14px 0 0;cursor: pointer;
        }
        .up_catgory{
            width: 100%;padding: 22px 12px;
        }
        .up_catgory:after{
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .up_catgory li{
            width: 85px;height: 28px;margin-right: 15px;float: left;
            font-size: 14px;line-height: 28px;text-align: center;cursor: pointer;
            background-color: #f1f2f4;color: #666;border-radius: 2px;
        }
        .up_catgory .active{
            background-color: #0099cb;color: #fff;
        }
        .up_sidle{
            width: 100%;height: 230px;padding: 0 60px;position: relative;margin-bottom: 22px;
        }
        .up_list_l{
            width: 60px;height: 100%;position: absolute;left: 0;top: 0;cursor: pointer;
            line-height: 230px;text-align: center;font-size: 120px;color: #dddddd;
        }
        .up_list_l:hover{
            opacity: 0.6;
        }
        .up_list_r{
            width: 60px;height: 100%;position: absolute;right: 0;top: 0;cursor: pointer;
            line-height: 230px;text-align: center;font-size: 120px;color: #dddddd;
        }
        .up_list_r:hover{
            opacity: 0.6;
        }
        .up_list{
            width: 100%;height: 100%;margin-right: -22px;
        }
        .up_list:after{
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .up_list li{
            float: left;width: 148px;height: 100px;margin:0 11px;margin-bottom: 22px;
            text-align: center;line-height: 100px;position: relative;cursor: pointer;
            background-color: #f2f2f2;
        }
        .up_list li span{
            position: absolute;bottom: 0;left: 0;
            width: 100%;height: 30px;background-color: rgba(0,0,0,0.3);
            font-size:14px;line-height:30px;color:#fff;text-align:center;
        }
        .up_list li img{
            width: 100%;min-height: 60%;max-height: 100%;
            position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
        }
        .up_sidle_up{
            display: none;
            width: 100%;height: 252px;position: relative;
        }
        .up_sidle_up:after{
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .up_sidle_up .up_img{
            width: 130px;margin-left: 26px;margin-bottom: 26px;height: 100px;float: left;
            font-size: 60px;text-align: center;line-height: 100px;position: relative;
            background-color: #f2f2f2;cursor: pointer;
        }
        .up_img img{
            width: 100%;min-height: 60%;max-height: 100%;
            position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
        }
        .up_img span{
            position: absolute;bottom: 0;left: 0;
            width: 100%;height: 30px;background-color: rgba(0,0,0,0.3);
            font-size:14px;line-height:30px;color:#fff;text-align:center;
        }
        .up_sidle_up .up_add{
            width: 130px;margin-left: 26px;margin-bottom: 26px;height: 100px;float: left;
            font-size: 60px;text-align: center;position: relative;
            border: 1px solid #f1f2f4;color: #bbb;line-height: 80px;
        }
        .up_add input{
            display: block;width: 100%;height: 100%;opacity: 0;cursor: pointer;
            position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
        }
        .up_bottom{
            width: 100%;height: 47px;background-color: #f1f2f4;
        }
        .up_btn{
            width: 72px;height: 28px;line-height: 28px;text-align: center;font-size: 14px;
            float: right;margin: 10px 10px 0 0;border-radius: 2px;
            background-color: #0099CB;color: #fff;cursor: pointer;
        }
    </style>
</head>
<body>
<div class="up_warp">
    <div class="up_title">
        <div class="up_title_l">图片管理器</div>
        <div class="up_title_r">x</div>
    </div>
    <div class="up_content">
        <ul class="up_catgory">
            <li class="active">选择图片</li>
            <li>上传图片</li>
        </ul>
        <!--选择图片-->
        <div class="up_sidle">
            <ul class="up_list">
                <li>
                    <img src="http://www.shftz.cn/upload/homepage/banner/banner_01.jpg" alt="">
                </li>
                <li>
                    <img src="http://www.shftz.cn/upload/homepage/banner/banner_02.jpg" alt="">
                </li>
                <li>
                    <img src="http://www.shftz.cn/upload/homepage/banner/banner_01.jpg" alt="">
                </li>
                <li>
                    <img src="http://www.shftz.cn/upload/homepage/banner/banner_02.jpg" alt="">
                </li>
                <li>
                    <img src="http://www.shftz.cn/upload/homepage/banner/banner_01.jpg" alt="">
                </li>
                <li>
                    <img src="http://www.shftz.cn/upload/homepage/banner/banner_02.jpg" alt="">
                </li>
                <li>
                    <img src="http://www.shftz.cn/upload/homepage/banner/banner_01.jpg" alt="">
                </li>
                <li>
                    <img src="http://www.shftz.cn/upload/homepage/banner/banner_02.jpg" alt="">
                </li>
            </ul>
            <div class="up_list_l">&lsaquo;</div>
            <div class="up_list_r">&rsaquo;</div>
        </div>
        <!--上传图片-->
        <div class="up_sidle_up">
            <div class="up_img">
                <img src="http://www.shftz.cn/upload/homepage/banner/banner_01.jpg" alt="">
            </div>
            <div class="up_img">
                <img src="http://www.shftz.cn/upload/homepage/banner/banner_02.jpg" alt="">
            </div>
            <div class="up_img">
                <img src="http://www.shftz.cn/upload/homepage/banner/banner_01.jpg" alt="">
            </div>
            <div class="up_img">
                <img src="http://www.shftz.cn/upload/homepage/banner/banner_02.jpg" alt="">
            </div>
            <div class="up_img">
                <img src="http://www.shftz.cn/upload/homepage/banner/banner_01.jpg" alt="">
            </div>
            <div class="up_add">
                +
                <input type="file">
            </div>
        </div>
    </div>
    <div class="up_bottom">
        <div class="up_btn">确定</div>
    </div>
</div>
<script>
    $(function () {
        $("body").on("click",".up_catgory li",function () {
            $(".up_catgory li").removeClass("active");
            $(this).addClass("active");
            $(".up_sidle").toggle();
            $(".up_sidle_up").toggle();
        });
        $(".up_list li").hover(function () {
            $(this).append("<span id='del_up'>删除</span>")
        },function () {
            $(this).children("span").remove();
        });
        $(".up_img").hover(function () {
            $(this).append("<span id='del_up'>删除</span>")
        },function () {
            $(this).children("span").remove();
        });
        $("body").on("click","#del_up",function () {
            $(this).parent().remove();
        });
        $("body").on("click",".up_title_r",function () {
            $(".up_warp").remove();
        });
        $("body").on("click",".up_btn",function () {
            alert("选择结束");
        })
    })
</script>
</body>
</html>